<%= form_for :story, :url => @url, :method => (@method || :post) do |f| %>
  <% if @story.errors.present? %>
    <div class="field field_with_errors">
      <p>Sorry, there was an error while submitting your story.</p>
    </div>
  <% end %>

  <% if flash[:error] %>
    <div class="field field_with_errors">
      <p><%= flash[:error] %></p>
    </div>
  <% end %>

  <div class="field required">
    <%= f.label :title %>
    <span>Required</span>

    <%= f.text_field :title, :placeholder => 'Illegal Logging in National Park' %>
  </div>

  <div class="field required">
    <div class="<%= 'field_with_errors' if @story.errors[:the_geom].present? %>">
      <%= label_tag 'Choose a location' %>
    </div>
    <p class='hint'>Select a location for your story by entering an address in the search box, by dragging the map, or by clicking the target icon to find your current location. The flag in the center indicates where your story will be placed. </p>

    <div class="<%= 'field_with_errors' if @story.errors[:the_geom].present? %> stories_map-container" >
      <div>

        <div id="stories_map" class="map stories_map"></div>
        <div class="map-controls">
          <div class="control-zoom">
            <button type="button" id="zoomIn"><svg><use xlink:href="#icon-control-plus"></use></svg></button>
            <button type="button" id="zoomOut"><svg><use xlink:href="#icon-control-minus"></use></svg></button>
          </div>
          <div class="control-pin"></div>
          <div class="control-locate" id="autoLocate">
            <button type="button"><svg><use xlink:href="#icon-control-locate"></use></svg></button>
          </div>
          <div class="control-search">
            <input class="map-search-input" type="text" placeholder="Search..."/>
          </div>
        </div>

      </div>
    </div>

    <%= f.hidden_field :the_geom %>
    <%= f.hidden_field :uploads_ids %>
  </div>

  <div class="field">
    <%= f.label :location %>

    <%= f.text_field :location, :placeholder => '“Katingan Peatland area, Indonesia,” “Near Ambanja, Mozambique”' %>
  </div>

  <div class="field short">
    <%= f.label :date %>

    <%= f.date_field :date %>
  </div>

  <div class="field">
    <%= f.label :details %>

    <%= f.text_area :details, :placeholder => '“Selective logging with chainsaws,” “Burning peatland,” “Forest cleared for agriculture,” “Affected species”' %>
  </div>

  <div class="field">
    <%= f.label :video %>

    <%= f.text_field :video, :placeholder => 'http://www.youtube.com/watch?v=lTG-0brb98I' %>
  </div>

  <div class="field">
    <%= f.label :media %>
    <p class="hint mobile-hide">Select images and videos to add to your story. Drag & drop to reorder them within the carousel. The first one will become the default image for the story. The maximum file size for uploads is 4 MB.</p>
    <p class="hint mobile-show">Click below to upload photos or videos to your story. The first photo will become the default image. The maximum file size for uploads is 4 MB. If you are on an iOS device you must upload pictures one by one.</p>

    <ul class="thumbnails">
      <li><a href='#' class='upload_picture'></a></li>

      <% (@story.media ||= []).each do |media| %>
        <% if media['thumbnail_url'].present? %>
          <li class="thumbnail sortable">
            <img src="<%= media['thumbnail_url'] %>" alt="" />
            <a href='#' class='destroy'></a>
          </li>
        <% end %>
      <% end %>
    </ul>
  </div>

  <div class="field short">
    <%= f.label :name %>
    <p class="hint">If you share your name, it will be visible on the GFW website, but your email will not be published. In some areas, forest clearing information is considered to be highly sensitive—users are encouraged to be cautious when sharing their names.</p>

    <%= f.text_field :name %>
  </div>

  <div class="field short required">
    <%= f.label :email %>
    <span>Required</span>

    <%= f.text_field :email %>
  </div>

  <div class="field">
    <%= f.submit 'Submit story', class: 'btn green medium' %>
  </div>
<% end %>

<input id="fileupload" type="file" name="media[image]" multiple>
